<template>
  <div class="doubleChoDetail">
    <el-tabs v-model="activeName">
      <el-tab-pane label="企业参会" name="list">
        <div class="filterArea">
          <el-radio-group v-model="inCompanyParams.audit_status" @change="handleChoStatus">
            <el-radio-button :label="null">全部</el-radio-button>
            <el-radio-button :label="3">待审核</el-radio-button>
            <el-radio-button :label="1">审核通过</el-radio-button>
            <el-radio-button :label="2">审核拒绝</el-radio-button>
          </el-radio-group>

          <div class="inputSearch">
            <el-input v-model="inCompanyParams.s" placeholder="请输入企业关键词搜索" style="width: 280px;" prefix-icon="el-icon-search" clearable @keyup.enter.native="handleSearchTable" />
          </div>
        </div>

        <!-- 列表 -->
        <el-table v-loading="loading" :data="inCompanyList" style="width: 100%">
          <el-table-column align="center" label="企业名称">
            <template slot-scope="{row}">
              <span>{{ row.company.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="社会信用统一码">
            <template slot-scope="{row}">
              <span>{{ row.company.credit_code }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="industryCategory" label="行业分类">
            <template slot-scope="{row}">
              <span>{{ row.company.industry.name }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="管理员电话">
            <template slot-scope="{row}">{{ row.company.contact_phone }}</template>
          </el-table-column>
          <el-table-column align="center" prop="audit_status" label="审核状态">
            <template slot-scope="{row}">
              <div>{{ row.audit_status == 1 ? '审核通过' : row.audit_status == 2 ? '审核拒绝' : row.audit_status == 3 ? '待审核' : '已结束' }}</div>
              <div v-show="row.audit_status == 2 && row.audit_remark">{{ '( ' + row.audit_remark + ' )' }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="audit_at" label="审核时间" />
          <el-table-column align="center" label="操作">
            <template slot-scope="{row}">
              <el-tooltip effect="dark" content="企业详情" placement="top-start">
                <span class="btnIcon document" @click="jumpIntoCompanyDetail(row.company.id)" />
              </el-tooltip>
              <el-tooltip v-show="row.audit_status == 2" effect="dark" content="恢复通过" placement="top-start">
                <span class="btnIcon restore" @click="handleAuditCompany(row.company.id, 1)" />
              </el-tooltip>
              <el-tooltip v-show="row.audit_status == 3" effect="dark" content="通过" placement="top-start">
                <span class="btnIcon pass" @click="handleAuditCompany(row.company.id, 1)" />
              </el-tooltip>
              <el-tooltip v-show="row.audit_status == 3" effect="dark" content="拒绝" placement="top-start">
                <!-- <span class="btnIcon refuse" @click="handleAuditCompany(row.company.id, 2)" /> -->
                <span class="btnIcon refuse" @click="showRefuseDialog(row.company.id, 2)" />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 30px;"
          :current-page.sync="inCompanyParams.page"
          :page-sizes="[2,10,20,30,50]"
          :page-size="inCompanyParams.limit"
          layout="prev, pager, next, total, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />

      </el-tab-pane>

      <el-tab-pane label="基本信息" name="detail">
        <el-form ref="cmpForm" label-width="150px" label-position="left" style="padding-left: 40px; width: 80%;">
          <el-form-item label="双选会名称" prop="name">
            <el-input v-model="doubelChoDetail.name" placeholder="请输入少于30个中文" :maxlength="30" clearable style="width: 50%" />
          </el-form-item>
          <el-form-item label="双选会海报">
            <div class="imageShowList">
              <div v-for="(item, index) of doubelChoDetail.images" :key="index" class="showItem">
                <img :src="item.image" alt="">
              </div>
            </div>
          </el-form-item>
          <el-form-item label="报名起止时间">
            <span>{{ doubelChoDetail.apply_start_at + ' —— ' + doubelChoDetail.apply_end_at }}</span>
          </el-form-item>
          <el-form-item label="会议起止时间">
            <span>{{ doubelChoDetail.meeting_start_at + ' —— ' + doubelChoDetail.meeting_end_at }}</span>
          </el-form-item>
          <el-form-item label="公司地址" prop="address">
            <el-cascader
              ref="myCascader"
              v-model="cityArea"
              placeholder="请选择省市区"
              :options="areaList"
              :props="defaultProps"
              style="margin-bottom: 30px; width: 400px;"
              clearable
              @change="handleCascaderChange"
            />
            <br>
            <el-input v-model="doubelChoDetail.address" placeholder="请输入公司地址，少于50个中文" :maxlength="50" style="width: 50%" clearable />
          </el-form-item>
          <el-form-item label="招聘会联系人">
            <el-input v-model="doubelChoDetail.contact_name" placeholder="请输入招聘会联系人（少于5个中文）" :maxlength="5" style="width: 50%" clearable />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="doubelChoDetail.contact_phone" placeholder="请输入招聘会联系人（少于30个数字和字符）" :maxlength="30" style="width: 50%" clearable />
          </el-form-item>
          <el-form-item label="联系邮箱">
            <el-input v-model="doubelChoDetail.contact_email" placeholder="请输入有效邮箱格式" :maxlength="30" style="width: 50%" clearable />
          </el-form-item>
          <el-form-item label="招聘会说明">
            <Tinymce ref="editor" v-model="doubelChoDetail.description" style="width: 80%" :height="200" />
          </el-form-item>
          <!-- 缺少一个文件上传 -->
          <el-form-item style="margin-top: 60px;">
            <el-button type="primary" @click="modifyDChoCompany">确认</el-button>
            <el-button @click="goBackList">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>

    <TipDialog :dialogshow="refuseDialog" tiptitle="提示：是否确认拒绝该企业" :chogroup="refuseList" @handlecancel="handleDialogCancel" @handlepass="handlePassRefuse" />
  </div>
</template>

<script>
import { getDChoCompany, auditDChoCompany, getDoubleChoDetail, getAreas, modifyDChoCompany } from '../../api/doubleChoose'
import Tinymce from '@/new_components/Tinymce'
import TipDialog from '@/new_components/tipDialog'
export default {
  components: {
    Tinymce,
    TipDialog
  },
  data() {
    return {
      activeName: 'list',
      doubleChoId: null, // 双选会ID
      loading: false,
      choStatus: 1, // 审核状态
      inCompanyList: [], // 参会企业列表
      inCompanyParams: {
        page: 1,
        limit: 10,
        s: '',
        audit_status: null // 审核状态   null 全部 1 通过 2 拒绝 3 未审核 4 已结束
      },
      total: null,
      doubelChoDetail: {}, // 双选会详情
      defaultProps: {
        label: 'label',
        value: 'label'
      },
      areaList: [], // 省市区列表
      cityArea: [],
      refuseDialog: false,
      refuseList: ['与本次双选会主题不符', '联系不上企业', '展位不足', '其他'],
      deleteCompanyId: null, // 拒绝的企业ID
      deleteStatus: null // 拒绝的状态
    }
  },
  mounted() {
    const data = JSON.parse(this.$route.query.data)
    this.doubleChoId = data.id
    this.getDoubleChoCompanyList()
    this.getDoubleChoDetail(this.doubleChoId)
    this.getAreaList()
  },
  methods: {
    handleChoStatus() {
      this.inCompanyParams.page = 1
      this.inCompanyParams.limit = 10
      this.getDoubleChoCompanyList()
    },
    // 点击'搜索'按钮
    handleSearchTable() {
      this.inCompanyParams.page = 1
      this.inCompanyParams.limit = 10
      this.inCompanyParams.audit_status = null
      this.getDoubleChoCompanyList()
    },
    // 获取省市区
    getAreaList() {
      getAreas().then(res => {
        this.areaList = res
      })
    },
    // 查看参加双选会企业列表
    getDoubleChoCompanyList() {
      this.loading = true
      getDChoCompany(this.doubleChoId, this.inCompanyParams).then(res => {
        this.inCompanyList = res.data
        this.total = res.meta.total
      }).finally(() => {
        this.loading = false
      })
    },
    // 查看企业详情
    jumpIntoCompanyDetail(id) {
      this.$router.push({
        path: '../company/detail',
        query: {
          id
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.inCompanyParams.limit = val
      this.getDoubleChoCompanyList()
    },
    handleCurrentChange(val) {
      this.inCompanyParams.page = val
      this.getDoubleChoCompanyList()
    },
    // 审核参加双选会企业
    handleAuditCompany(id, status) {
      let aletMsg = ''
      if (status === 1) {
        aletMsg = '是否确认通过审核'
      } else if (status === 2) {
        aletMsg = '是否拒绝该企业'
      }
      this.$confirm(aletMsg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        auditDChoCompany(this.doubleChoId, id, status).then(() => {
          this.$message({
            type: 'success',
            message: '操作成功！'
          })
          this.getDoubleChoCompanyList()
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
      })
    },
    // 获取双选会详情
    getDoubleChoDetail(id) {
      getDoubleChoDetail(id).then(res => {
        this.doubelChoDetail = res
        this.cityArea.push(res.province)
        this.cityArea.push(res.city)
        this.cityArea.push(res.district)
      })
    },
    goBackList() {
      this.$router.push({ path: './list' })
    },
    handleCascaderChange(value) {
      if (value) {
        this.doubelChoDetail.province = value[0]
        this.doubelChoDetail.city = value[1]
        this.doubelChoDetail.district = value[2]
      }
    },
    modifyDChoCompany() {
      if (this.doubelChoDetail.province !== this.doubelChoDetail.city) {
        this.doubelChoDetail.full_address = this.doubelChoDetail.province + '省' + this.doubelChoDetail.city + '市' + this.doubelChoDetail.district + this.doubelChoDetail.address
      } else {
        this.doubelChoDetail.full_address = this.doubelChoDetail.city + '市' + this.doubelChoDetail.district + this.doubelChoDetail.address
      }
      modifyDChoCompany(this.doubleChoId, this.doubelChoDetail).then(res => {
        this.$message({
          type: 'success',
          message: '双选会信息修改成功！'
        })
        this.$router.push({ path: './list' })
      })
    },
    showRefuseDialog(id, status) {
      this.refuseDialog = true
      this.deleteCompanyId = id
      this.deleteStatus = status
    },
    handleDialogCancel() {
      this.refuseDialog = false
      this.deleteCompanyId = null
      this.deleteStatus = null
    },
    // 确认拒绝
    handlePassRefuse(data) {
      console.log(data)
      this.refuseDialog = false
      this.loading = true
      auditDChoCompany(this.doubleChoId, this.deleteCompanyId, this.deleteStatus, { audit_remark: data }).then(() => {
        this.$message({
          type: 'success',
          message: '操作成功！'
        })
        this.getDoubleChoCompanyList()
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss">
  $defaultColor: #0A2045;
  .doubleChoDetail {
    padding: 30px;
    .filterArea {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      .el-radio-button__orig-radio:checked+.el-radio-button__inner {
        background-color: #F1F7FF;
        border: none;
        color: #0C66FF;
        box-shadow: none;
      }
      .el-radio-button__inner {
        border: none;
        border-radius: 8px;
        color: #6C798F;
      }
      .el-radio-group {
        border: 1px solid #E1E4EB;
        border-radius: 8px;
      }

      .inputSearch {
        .el-input--suffix .el-input__inner {
          padding-right: 0;
        }
      }

    }
  }
  // 标题头样式修改
  .el-table {
    color: $defaultColor;
    font-size: 14px;
    line-height: 19px;
    thead {
      color: $defaultColor;
      tr, th {
        background: #FAFAFB;
      }
    }
  }
  .el-button:focus, .el-button:hover {
    color: #0C66FF;
    border-color: #0C66FF;
    background-color: #fff;
  }
  .el-button--primary {
    color: #FFF;
    background-color: #0C66FF;
    border-color: #0C66FF;
  }
  .el-button--small {
    border-radius: 8px;
  }
  .el-button--primary:hover {
    color: #fff;
    background-color: #0951CC;
    border-color: #0951CC;
  }
  .btnIcon {
    display: inline-block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    margin-right: 10px;
  }
  // 企业详情
  .document {
    background: url('../../assets/btn/icon_information.png') no-repeat center center;
  }
  .document:hover {
    background: url('../../assets/btn/icon_information_s.png') no-repeat center center;
  }
  // 通过
  .pass {
    background: url('../../assets/btn/icon_approved.png') no-repeat center center;
  }
  .pass:hover {
    background: url('../../assets/btn/icon_approved_s.png') no-repeat center center;
  }
  // 拒绝
  .refuse {
    background: url('../../assets/btn/icon_refuse.png') no-repeat center center;
  }
  .refuse:hover {
    background: url('../../assets/btn/icon_refuse_s.png') no-repeat center center;
  }
  // 恢复通过
  .restore {
    background: url('../../assets/btn/icon_restore cooperation.png') no-repeat center center;
  }
  .restore:hover {
    background: url('../../assets/btn/icon_restore cooperation_s.png') no-repeat center center;
  }
  .imageShowList {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .showItem {
      margin-right: 10px;
      img {
        width: 200px;
        height: 200px;
      }

    }
  }
</style>
